<template>
    <div>
        <div class="container">
            <el-form ref="form" :model="form" label-width="150px">
                <el-form-item label="公司名称中文:">
                    <el-input v-model="form.shop_title"></el-input>
                </el-form-item>
                <el-form-item label="公司名称英文:">
                    <el-input v-model="form.e_shop_title"></el-input>
                </el-form-item>
                <el-form-item label="公司logo">
                    <div style="display: flex;align-items: flex-end;">
                        <el-image style="width: 100px; height: 100px" :src="form.logo_img"
                            :preview-src-list="[form.logo_img]">
                        </el-image>
                        <div>
                            <div>图片大小:100*100</div>
                            <input type="file" accept="image/jpeg,image/jpg,image/gif,image/png,image/bmp"
                                id="cert_file" @change="imgChange1" />
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="备案号中文">
                    <el-input v-model="form.bei_an_code"></el-input>
                </el-form-item>
                <el-form-item label="备案号英文">
                    <el-input v-model="form.e_bei_an_code"></el-input>
                </el-form-item>
                <el-form-item label="公司信息中文">
                    <el-input type="textarea" v-model="form.gy_text"></el-input>
                </el-form-item>
                <el-form-item label="公司信息英文">
                    <el-input type="textarea" v-model="form.e_gy_text"></el-input>
                </el-form-item>
                <el-form-item label="公司email">
                    <el-input v-model="form.gs_email"></el-input>
                </el-form-item>
                <el-form-item label="公司电话">
                    <el-input v-model="form.gs_tel"></el-input>
                </el-form-item>
                <el-form-item label="公司地址中文">
                    <el-input v-model="form.gs_add"></el-input>
                </el-form-item>
                <el-form-item label="公司地址英文">
                    <el-input type="textarea" v-model="form.e_gs_add"></el-input>
                </el-form-item>
                <el-form-item label="公司二维码">
                    <div style="display: flex;align-items: flex-end;">
                        <el-image style="width: 100px; height: 100px" :src="form.gs_code"
                            :preview-src-list="[form.gs_code]">
                        </el-image>
                        <div>
                            <div>图片大小:100*100</div>
                            <input type="file" accept="image/jpeg,image/jpg,image/gif,image/png,image/bmp"
                                id="cert_file" @change="imgChange2" />
                        </div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">更新</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
import {
    Loading
} from 'element-ui';
import AxiosPost from '../api/index'

export default {
    name: 'LoginLogList',
    data() {
        return {
            form: {
                shop_title: '',
                logo_img: '',
                bei_an_code: '',
                gy_text: '',
                gs_email: '',
                gs_tel: '',
                gs_add: '',
                gs_code: '',
                lx_img: '',
                kefu_url:'',
                zdy_title:'',
                zdy_url:'',
                zdy_sy_list:'',
                e_shop_title:'',
                e_bei_an_code:'',
                e_gy_text:'',
                e_gs_add:'',
            },
            form2: {},
            files1: null,
            files2: null,
            files3: null,

        };
    },
    created() {
        this.getData()
    },
    methods: {
        async getData() {
            let info = await AxiosPost('/admin/shop_set/configshop')
            if (info.code !== 10000) {
                this.$message.error(info.message)
                return false
            } else {
                this.form2 = info.data
                let api = 'https://wjapi.surveydiscovery.com/'
                this.form.shop_title = info.data.shop_title
                this.form.logo_img = api + info.data.logo_img
                this.form.bei_an_code = info.data.bei_an_code
                this.form.gy_text = info.data.gy_text
                this.form.gs_email = info.data.gs_email
                this.form.gs_tel = info.data.gs_tel
                this.form.gs_add = info.data.gs_add
                this.form.gs_code = api + info.data.gs_code
                this.form.lx_img = api + info.data.lx_img
                this.form.e_shop_title = info.data.e_shop_title
                this.form.e_bei_an_code = info.data.e_bei_an_code
                this.form.e_gy_text = info.data.e_gy_text
                this.form.e_gs_add = info.data.e_gs_add

                this.form.kefu_url = info.data.kefu_url
                this.form.zdy_title = info.data.zdy_title
                this.form.zdy_url = info.data.zdy_url
                this.form.zdy_sy_list = info.data.zdy_sy_list
            }
        },
        imgChange1(e) {
            this.files1 = e.target.files[0]
            const formData = new FormData();
            formData.append('image', this.files1);
            // 执行上传操作
            this.sendFormData(formData);

        },
        imgChange2(e) {
            this.files2 = e.target.files[0]
            const formData = new FormData();
            formData.append('gs_code', this.files2);
            // 执行上传操作
            this.sendFormData(formData);
        },
        imgChange3(e) {
            this.files3 = e.target.files[0]
            const formData = new FormData();
            formData.append('lx_img', this.files3);
            // 执行上传操作
            this.sendFormData(formData);
        },
        async onSubmit() {
            let option = {}
            this.form.shop_title != this.form2.shop_title ? option.shop_title = this.form.shop_title : '';
            this.form.bei_an_code != this.form2.bei_an_code ? option.bei_an_code = this.form.bei_an_code : '';
            this.form.gy_text != this.form2.gy_text ? option.gy_text = this.form.gy_text : '';
            this.form.gs_email != this.form2.gs_email ? option.gs_email = this.form.gs_email : '';
            this.form.gs_tel != this.form2.gs_tel ? option.gs_tel = this.form.gs_tel : '';
            this.form.gs_add != this.form2.gs_add ? option.gs_add = this.form.gs_add : '';
            this.form.e_shop_title != this.form2.e_shop_title ? option.e_shop_title = this.form.e_shop_title : '';
            this.form.e_bei_an_code != this.form2.e_bei_an_code ? option.e_bei_an_code = this.form.e_bei_an_code : '';
            this.form.e_gy_text != this.form2.e_gy_text ? option.e_gy_text = this.form.e_gy_text : '';
            this.form.e_gs_add != this.form2.e_gs_add ? option.e_gs_add = this.form.e_gs_add : '';
           
            this.form.kefu_url != this.form2.kefu_url ? option.kefu_url = this.form.kefu_url : '';
            this.form.zdy_title != this.form2.zdy_title ? option.zdy_title = this.form.zdy_title : '';
            this.form.zdy_url != this.form2.zdy_url ? option.zdy_url = this.form.zdy_url : '';
            this.form.zdy_sy_list != this.form2.zdy_sy_list ? option.zdy_sy_list = this.form.zdy_sy_list : '';
            if (Object.keys(option).length !== 0) {
                let info = await AxiosPost('/admin/shop_set/saveshop', option)
                if (info.code !== 10000) {
                    this.$message.error(info.message)
                    return false
                } else {
                    this.getData()
                    this.$message.success('更新成功')
                }
            }

        },
        sendFormData(formData) {
            const _this = this
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'https://wjapi.surveydiscovery.com/shop_set/saveshop', true);
            xhr.setRequestHeader('authorization', "Bearer " + localStorage.getItem("uid") + "." + localStorage.getItem("token"));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                    // 上传成功处理逻辑
                    console.log('上传成功');
                    _this.getData()
                }
            };
            xhr.send(formData);
        }
    }
};
//时间戳转换
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 200px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
